<template>
  <div class="side-nav-content title-gen-container">
    <div class="input">
      <theme-button size="mini">开始分析</theme-button>
    </div>
    <span class="title">生成结果</span>
    <div class="gen-result">
      <div class="item">
        <div class="title-item">
          小区物业管理系统的设计与实现小区物业管理系统的设计与实现小区物业管理系统的设计与实现
        </div>
        <i class="iconfont icon-fuzhi" />
      </div>
      <div class="item">
        <div class="title-item">
          小区物业管理系统的设计与实现小区物业管理系统的设计与实现小区物业管理系统的设计与实现
        </div>
        <i class="iconfont icon-fuzhi" />
      </div>
      <div class="item">
        <div class="title-item">
          小区物业管理系统的设计与实现小区物业管理系统的设计与实现小区物业管理系统的设计与实现
        </div>
        <i class="iconfont icon-fuzhi" />
      </div>
      <div class="item">
        <div class="title-item">
          小区物业管理系统的设计与实现小区物业管理系统的设计与实现小区物业管理系统的设计与实现
        </div>
        <i class="iconfont icon-fuzhi" />
      </div>
      <div class="item">
        <div class="title-item">
          小区物业管理系统的设计与实现小区物业管理系统的设计与实现小区物业管理系统的设计与实现
        </div>
        <i class="iconfont icon-fuzhi" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TitleGen",
};
</script>

<style lang="less" scoped>
@import url("./common.less");

.dark-theme .title-gen-container {
  .gen-result .item {
    color: #2f7756;
  }
}

.title-gen-container {
  .gen-result {
    margin-top: 20px;
    .item {
      display: flex;
      align-items: center;
      height: 32px;

      .title-item {
        width: 400px;
        font-size: 16px;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .iconfont {
        margin-left: 10px;
        font-size: 32px;
        cursor: pointer;
      }
    }
    .item + .item {
      margin-top: 20px;
    }
  }
}
</style>
